<template>
  <el-input v-if="type==='input'" v-model="value" v-bind="inputProps" class="filter-input" @change="handleChange"/>
  <el-input v-else-if="type==='inputBtn'" v-model="value" v-bind="inputProps" class="filter-input" @change="handleChange">
    <template #append>
      <el-button :icon="icon" @click="handleClick" />
    </template>
  </el-input>
  <el-select v-else-if="type==='select'" v-model="value" :multiple="multiple" v-bind="inputProps" class="filter-input" @change="handleChange">
    <el-option
      v-for="item in inputProps.options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
  <el-input-number v-else-if="type==='inputNumber'" v-model="value" :controls-position="controlsPosition" v-bind="inputProps" class="filter-input" @change="handleChange"/>
  <el-cascader v-else-if="type==='cascader'" v-model="value" v-bind="inputProps" class="filter-input" @change="handleChange"/>
  <el-date-picker v-else-if="type==='datePicker'" v-model="value" v-bind="inputProps" class="filter-input" @change="handleChange"/>
  <el-time-picker v-else-if="type==='timePicker'" v-model="value" v-bind="inputProps" class="filter-input" @change="handleChange"/>
  <el-time-select v-else-if="type==='timeSelect'" v-model="value" v-bind="inputProps" class="filter-input" @change="handleChange"/>
  <el-tree v-else-if="type==='tree'" v-model="value" v-bind="inputProps" :props="inputProps.defaultProps" class="filter-input" @change="handleChange"/>
  <el-tree-select v-else-if="type==='treeSelect'" v-model="value" v-bind="inputProps" :props="inputProps.defaultProps" class="filter-input" @change="handleChange"/>
  <template v-else-if="type==='checkbox'">
    <el-checkbox
      v-if="inputProps.showCheckAll"
      v-model="value.checkAll"
      :disabled="inputProps.disabled"
      class="check-all"
      @change="checkAllChange"
    >{{ inputProps.options[0].label }}</el-checkbox>
    <el-checkbox-group v-model="value" v-bind="inputProps" @change="handleCheckChange">
      <!-- checkbox组包含两种情况，有全选和没全选，这里根据showCheckAll属性值做了判断 -->
      <el-checkbox v-for="item in inputProps.options.slice(1)" v-if="inputProps.showCheckAll" :key="item.value" :label="item.value">
        {{item.label }}
        <img
          :src="image.alarm"
          style="background-color: red; width: 16px; height: 16px; vertical-align: middle"
          v-if="item.alert"
        />
      </el-checkbox>
      <el-checkbox v-for="item in inputProps.options" v-else :key="item.value" :label="item.value">
        {{item.label }}
      </el-checkbox>
    </el-checkbox-group>
  </template>
  <!-- 7-21增加radio控件 -->
  <template v-else-if="type==='radio'">
    <el-radio
      v-if="inputProps.showCheckAll"
      v-model="checkAll"
      :disabled="inputProps.disabled"
      class="check-all"
      @change="checkAllChange"
    >全部</el-radio>
    <el-radio-group v-model="value" v-bind="inputProps" @change="handleCheckChange" style="flex-wrap: unset">
      <el-radio v-for="item in inputProps.options" :key="item.value" :label="item.value">
        {{item.label }}
      </el-radio>
    </el-radio-group>
  </template>
  <!-- 7-21增加radiobutton控件 -->
  <template v-else-if="type==='radioButton'">
    <el-radio-group v-model="value" v-bind="inputProps" @change="handleCheckChange">
      <el-badge v-for="item in inputProps.options" :value="item.num" class="item" :hidden="item.num == 0">
        <el-radio-button :key="item.value" :label="item.value">
          {{ item.label }}
        </el-radio-button>
      </el-badge>
    </el-radio-group>
  </template>
  <!-- 7-28增加upload控件 -->
  <template v-else-if="type==='upload'">
    <el-upload v-model:file-list="value" class="upload-demo" accept=".jpg,.jpeg,.png,.svg"
               :before-upload="beforeUpload" action="#" :multiple="multiple" :limit="limit" :auto-upload="false">
      <!-- <el-button type="primary">Click to upload</el-button> -->
      <button>选择文件</button>&nbsp;&nbsp;
      <template #tip>
        <span>未选择任何文件</span>
      </template>
    </el-upload>
  </template>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import type { ModelValueType, InputItemType } from '@/components/FilterBar/types'
import { image } from '@/assets/index'

const props = defineProps<{
  modelValue?: ModelValueType;
  type: InputItemType;
  icon: any;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  inputProps: { [key: string]: any }
}>()
const emits = defineEmits(['update:modelValue', 'change', 'click'])
const multiple = ref()
const value = computed({
  get: () => props.modelValue,
  set: (val) => {
    emits('update:modelValue', val)
  }
})
const handleChange = (data: ModelValueType) => {
  emits('change', data)
}
const handleClick = (data: ModelValueType) => {
  emits('click', data)
}
// 7-28增加upload相关方法
const beforeUpload = (rawFile) => {
  emits('beforeUpload', rawFile)
}
const checkAll = ref(false)
const checkAllChange = (data: boolean) => {
  const ops = props.inputProps.options
  if (Array.isArray(ops)) {
    const val = data ? ops.map(v => v.value) : []
    emits('update:modelValue', val)
    handleChange(val)
  }
}
const handleCheckChange = (data: ModelValueType) => {
  const ops = props.inputProps.options
  if(props.inputProps.options[0]["label"].includes("全部")){
    value.value.checkAll = data.length === ops.length-1
  }else{
    checkAll.value = data.length === ops.length
  }
  handleChange(data)
}
</script>

<style lang="less">
.filter-input {
  width: 100% !important;
}
.check-all {
  margin-right: 30px!important;
}
</style>
